<template>
  <PCard class="services-in-progress-con" :isCardBorder="false" :shadow="'never'" :isHeadBottomBorder="true"
    :bodyStyle="{ width: '100%' }">
    <div slot="header" class="sip-title">
      <span>{{ pageName }}</span>
      <div class="btn-group">
        <a-button type="" :class="getBtnStyle(TaskStatus)">{{ TaskStatus }} </a-button>
        <a-button type="primary" @click="goBack">返 回</a-button>
      </div>
    </div>
    <div class="body">
      <div class="item item-row">
        <span>企业名称：{{ entName }}</span>
        <span v-if="sbzq">申报周期：{{sbzq}}</span>
      </div>
      <div class="item">
        <!-- <component :is="winConfig.componentName" :formInfo="pageInfo" :coloseEvent="winColosedEvent"></component> -->
        <ServicesInProgressItem :pageInfo="pageInfo"></ServicesInProgressItem>
      </div>
    </div>
  </PCard>
</template>

<script>
import { Storage } from '@/utils/util'
import ServicesInProgressItem from './component/ServicesInProgressItem.vue'
import detailConfig from './util/configData'
import pageEvent from './util/pageEventsp'
const pageNameList = {
  "银行开户": '银行开户',
  "税务变更": '税务变更',
  "邮寄资料": '邮寄资料',
  "电子签章": '电子签章',
  "企业服务模式变更": '企业服务模式变更',
  "个税申报": '税务申报（查账）',
  "注册信息变更": '注册信息变更',
  "企业注销": '企业注销',
  "税务申报": '税务申报（核定）',
  "增值业务": '增值业务',
}
export default {
  name: 'ServicesInProgress',
  components: { ServicesInProgressItem },
  data() {
    return {
      sbzq:'', // 2023年第一季度
      pageName: '',
      entName: '',
      TaskStatus: '',
      pageInfo: { pageData: {}, dbData: {} },
      winConfig: {
        componentName: ''
      }
    }
  },
  watch: {
    'pageInfo': {
      handler(val) {
        if(this.isType.isObject(val)){
          const {dbData, pageData:{name}} = val // dbData  pageData
          if(name=='个税申报'){
            this.sbzq = dbData && dbData.quarterStr || '--'
          }
          if(name=='税务申报'){
            this.sbzq = dbData && dbData.quarterStr || '--'
          }
        }
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    const key = this.$route.query.t
    if (key) {
      this.getUrlParam(key)
    }
    let flowNo = this.$route.query.externalId || this.$route.query.bizId
    const pageNum = this.$route.query.pn
    console.log('详情页面初始化==>', flowNo && pageNum, flowNo, pageNum, this.$route.query);
    if (flowNo && pageNum) {
      this.ExternalData(flowNo, pageNum)
    }
  },
  methods: {
    async pageEvent(type, ...args) {
      return await pageEvent(type, this, ...args)
    },
    async ExternalData(flowNo, pageNum) {
      // const flowNo = this.$route.query.externalId
      // const pageNum = this.$route.query.pn
      // 税务变更  企业服务模式变更
      const pageNumList = {
        1: "银行开户",
        2: "税务变更",
        3: "邮寄资料",
        4: "电子签章",
        5: "企业服务模式变更",
        6: "个税申报",
        7: "注册信息变更",
        8: "企业注销",
        9: "税务申报",
        10: "增值业务",
      }
      const tempData = { TaskStatus: '', entId: '', entName: '', name: '', data: {} }
      this.pageName = pageNameList[pageNumList[pageNum]]
      console.log('ExternalData 0 =>', this.pageName, flowNo);
      tempData.name = this.pageName
      this.pageInfo.pageData = tempData
      const res = await this.pageEvent('getDataForPageName', pageNumList[pageNum], '', flowNo, '')
      // this.entName = res.entName
      // tempData = {entId:'',entName:res.entName}
      // tempData.entId = res.entId
      tempData.entName = this.entName
      tempData.TaskStatus = this.TaskStatus
      this.pageInfo.pageData = tempData
      console.log('ExternalData===>', res, this);
    },
    getUrlParam(key) {

      const data = {...Storage.get(key)}
      this.pageName = pageNameList[data.name]
      this.entName = data.entName
      this.TaskStatus = data.TaskStatus
      this.pageInfo.pageData = data
      this.pageEvent('getDataForPageName', data.name, data.entId, data.data.flowNo, data.data.id)
      console.log('页面数据==》', data, this);
    },
    goBack() {
      this.$router.go(-1)
    },
    winColosedEvent() {

    },
    getBtnStyle(key) {
      return detailConfig['TaskStatusbtnCol'][key]
    }
  }
}
</script>

<style lang="less">
.services-in-progress-con {
  box-sizing: border-box;

  .sip-title {
    font-size: 28px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .btn-group {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      .ant-btn-green {
        color: #fff;
        background-color: #32BC51;
        border-color: #32BC51;
        text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
        box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
      }

      .ant-btn-orange {
        color: #fff;
        background-color: #FF9B46;
        border-color: #FF9B46;
        text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
        box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
      }

      .ant-btn-improved {
        color: #fff;
        background-color: #FF797F;
        border-color: #FF797F;
        text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
        box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
      }
    }



  }

  .body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    .item {
      width: 100%;

      &.item-row {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        span {
          margin: 0 20px;
        }

      }
    }
  }
}
</style>
